<template>
  <view :style="{ '--themeColor': themeColor }">
    <u-popup
      :show="visible"
      :zIndex="10078"
      @touchmove.stop.prevent
      round="20rpx"
    >
      <view class="coupon-pop">
        <view class="pop-top">
          <view class="title">{{ title }}</view>
          <view class="icon" @click="closePop()">
            <u-icon name="close" size="26" color="#888888" />
          </view>
        </view>
        <scroll-view scroll-y="true" class="pop-list" v-if="list.length > 0">
          <view class="coupon" v-for="(item, index) in list" :key="index">
            <view class="left">
              <view class="price">
                <span class="denomination-value">
                  {{
                    item.denomination > 0
                      ? item.denomination / 100
                      : item.discountPercent / 10
                  }}
                </span>
                <span :style="{ color: themeColor }" class="denomination-unit">
                  {{ item.denomination > 0 ? "元" : "折" }}</span
                >
              </view>
              <view class="condition">
                满{{ item.transactionMinimum / 100 }}元可用
              </view>
              <image
                v-if="item.pullDown"
                class="hasPullDownCoupon"
                src="https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/img/pub/hasPullDownCoupon.png"
              />
            </view>
            <view class="right">
              <view class="top">
                <view class="coupon-name">
                  <view class="name">{{ item.couponName }}</view>
                  <view class="time">{{ item.expireTime }} 过期</view>
                </view>
                <view
                  :class="['pull', item.pullDown ? 'pullDown' : '']"
                  @click="pullDownCoupon(item, index)"
                >
                  {{ item.pullDown ? "已领" : "领取" }}</view
                >
              </view>
            </view>
          </view>
          <view class="no-more">没有更多了</view>
        </scroll-view>
        <view v-else class="empty">
          <list-enpty
            title="暂时没有优惠可领"
            iconUrl="https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/img/pub/empty-coupon.png"
          />
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    couponList: {
      default: [],
      require: true,
    },
    visible: {
      default: false,
    },
    title: {
      type: String,
      default: "本店优惠",
    },
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  data() {
    return {
      list: null,
    };
  },
  watch: {
    couponList(val) {
      this.list = val;
    },
  },
  methods: {
    closePop() {
      this.$emit("update:visible", false);
    },
    pullDownCoupon(item, index) {
      this.$emit("pullDownCoupon", item, index);
      item.pullDown = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.coupon-pop {
  height: 66vh;
  background: #f7f7f7;
  width: calc(100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  .title {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1a1a1a;
  }
  .pop-top {
    height: 100rpx;
    font-size: 29rpx;
    font-weight: 500;
    color: #131313;
    display: flex;
    width: calc(100% - 80rpx);
    padding: 0 40rpx;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
    margin-bottom: 25rpx;
    border-radius: 8rpx 8rpx 0px 0px;
    overflow: hidden;
    position: relative;
    .icon {
      position: absolute;
      right: 40rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .pop-list {
    flex: 1;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .coupon {
      display: flex;
      background: #fff;
      border-radius: 20rpx;
      width: 710rpx;
      margin: 0 auto;
      margin-bottom: 25rpx;
      align-items: center;

      .left {
        width: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 24rpx;
        font-weight: 500;
        color: #131313;
        position: relative;
        height: 160rpx;
        position: relative;
        &::after {
          content: "";
          background: #f7f7f7;
          width: 30rpx;
          height: 30rpx;
          position: absolute;
          top: -15rpx;
          right: -15rpx;
          border-radius: 50%;
        }
        &::before {
          content: "";
          background: #f7f7f7;
          width: 30rpx;
          height: 30rpx;
          position: absolute;
          bottom: -15rpx;
          right: -15rpx;
          border-radius: 50%;
        }
        .condition {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #1a1a1a;
          line-height: 36rpx;
        }
        .price {
          font-size: 28rpx;
          margin-bottom: 15rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: var(--theme-color);
          .denomination-value {
            font-size: 48rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ff5500;
          }
          .denomination-unit {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ff5500;
            line-height: 36rpx;
          }
        }
        .hasPullDownCoupon {
          width: 75rpx;
          height: 75rpx;
          position: absolute;
          top: 10rpx;
          right: 20rpx;
          z-index: 1;
        }
      }
      .right {
        flex: 1;
        padding: 0rpx 25rpx 0rpx;
        border-left: 1px dashed #efefef;

        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .coupon-name {
            color: #181818;
            .name {
              font-size: 32rpx;
              font-weight: bold;
            }
            .time {
              font-size: 22rpx;
              margin-top: 15rpx;
              font-weight: 500;
              color: #999999;
              line-height: 36rpx;
            }
          }
          .pull {
            width: 120rpx;
            height: 58rpx;
            background: var(--theme-color);
            border-radius: 29rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30rpx;
            font-weight: 500;
            color: #ffffff;
          }
          .pullDown {
            @extend .pull;
            background-color: #fff5f0;
            border: 1px solid var(--theme-color);
            border-radius: 29rpx;
            color: var(--theme-color);
          }
        }
      }
    }
  }
  .empty {
    margin-top: 50%;
    transform: translateY(-50%);
  }
}
</style>
